<template>
    <div class="personal-edit">
         <Form :model="formItem" :label-width="60">
            <FormItem label="昵称">
                <Input v-model="formItem.fullname"></Input>
            </FormItem>
            <FormItem label="性别">
                <RadioGroup v-model="formItem.sex">
                    <Radio label="0">男</Radio>
                    <Radio label="1">女</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="生日">
                <DatePicker type="date" placeholder="Select date" v-model="formItem.birthday"></DatePicker> 
            </FormItem>
            <FormItem label="血型">
                <Select v-model="formItem.abo">
                    <Option value="0">A型</Option>
                    <Option value="1">B型</Option>
                    <Option value="2">O型</Option>
                    <Option value="3">AB型</Option>
                    <Option value="4">其他血型</Option>
                </Select>
            </FormItem>
            <FormItem label="所在地">
                <Cascader :data="data" v-model="formItem.address"></Cascader>
            </FormItem>
            <FormItem label="学校">
                <Input v-model="formItem.school"></Input>
            </FormItem>
            <FormItem label="公司">
                <Input v-model="formItem.company"></Input>
            </FormItem>
            <FormItem label="手机">
                <Input v-model="formItem.mobile"></Input>
            </FormItem>
            <FormItem label="邮箱">
                <Input v-model="formItem.mail"></Input>
            </FormItem>
            <FormItem label="个性签名">
                <Input v-model="formItem.signature" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="submit">保存</Button>
                <Button style="margin-left: 8px" @click="back">返回</Button>
            </FormItem>
        </Form>
    </div>
</template>
<script>
    export default {
      data () {
        return {
          formItem: {
            fullname: '测试',
            sex: '0',
            birthday: '1993-03-15',
            abo: '1',
            address: [],
            school: '郑州大学',
            company: '中国电信',
            mobile: '13456789012',
            mail: '1111111111@qq.com',
            signature: '不知道写什么。。。。。。'
          }
        }
      },
      methods: {
        // 返回
        back () {
          this.$router.push({path: '/personal'})
        },
        // 提交资料
        submit () {}
      }
    }
</script>

<style lang="less">
    .personal-edit{
        width: 320px;
        height: 540px;
        padding-top: 20px;
        position: relative;
        border-radius: 4px;
        background-image: url('../assets/images/login1.jpg');
        background-repeat:no-repeat;
        background-size:320px 540px;
        .ivu-form{
            margin-left: 30px;
            .ivu-form-item{
                margin-bottom: 10px !important;
                width: 80% !important;
                // color: #fff !important;   
            }
            .ivu-form-item-label{
                color: #fff !important;
            }
            .ivu-radio-group{
                color: #fff;
            }
            .ivu-input{
                background-color: transparent !important;
                border: solid #cfcfcf 1px; 
                color: #fff;
                outline: none;
            }
            .ivu-input-wrapper .ivu-icon{
                color: #fff;
            }
            .ivu-input:hover{
                border-color: #fff;
            }
            .ivu-input:focus{
                border-color: #fff;
                box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 8px;
            }
            .ivu-select-selection{
                background-color: transparent !important;
                border: solid #cfcfcf 1px; 
                .ivu-icon{
                    color: #fff;
                } 
            }
            .ivu-cascader-rel .ivu-icon{
                color: #fff;
            }
            .ivu-select-selected-value{
                color: #fff;
            }
        }  
           
    } 
</style>

